<template>
  <view class="home container">
    <search
      :customStyle="{ padding: '12rpx 32rpx' }"
      class="margin-t-24"
      width="auto"
      fontSize="26rpx"
      @search="getSearchList"
      @clear="handleClear"
      placeholder="请输入关键词"
      iconPosition="prefix"
      shadow
    />
    <!-- 轮播图 -->
    <view class="home-swiper">
      <u-swiper :list="list1" height="141"></u-swiper>
    </view>
    <!-- application -->
    <view
      class="home-application flex-center"
      @click="$jump('/subPages/have-sound/weixin-article')"
    >
      <view class="home-application-content">
        <view class="title">有声力量</view>
        <view>强省会 勇担当 幸福开福宣讲人</view>
      </view>
    </view>
    <!-- 菜单 -->
    <view class="home-menu">
      <u-grid :border="false" col="5">
        <u-grid-item
          v-for="(item, index) in baseList"
          :key="index"
          @click="$jump(item.url, { query: { type: item.title } })"
        >
          <image
            class="grid-icon"
            style="width: 100rpx; height: 100rpx"
            :src="item.name"
            mode=""
          />
          <text class="grid-text">{{ item.title }}</text>
        </u-grid-item>
      </u-grid>
      <u-toast ref="uToast" />
    </view>
    <!-- 热门课程 -->
    <view class="home-hot">
      <view class="hot-course-header flex-a-center justify-between">
        <view class="header-title">热门课程</view>
        <view
          class="header-more flex-a-center"
          @click="$jump('/subPages/chinese-studies/chinese-studies')"
        >
          <text>更多</text>
          <u-icon name="arrow-right"></u-icon>
        </view>
      </view>
      <view class="hot-course-list">
        <u-scroll-list indicatorColor="#fff0f0" indicatorActiveColor="#f56c6c">
          <view
            class="hot-course-item"
            v-for="item in courseDataList"
            :key="item"
            @click="handleCourseItem(item)"
          >
            <image :src="$helper.filterCover(item.course_log[0].url)" mode="" />

            <view class="hot-course-item-footer">
              <view class="course-detailed text-ellipsis">
                {{ item.course_title }}
              </view>
              <view class="tag-list flex-a-center">
                <text
                  class="tag"
                  v-for="(tag, index) in item.tags"
                  :key="index"
                  >{{ tag }}</text
                >
              </view>
            </view>
          </view>
        </u-scroll-list>
      </view>
    </view>
  </view>
</template>

<script>
import { getModelList } from "@/api";
import { getFilter } from "@/common/function";
export default {
  data() {
    const getIcon = (icon) =>
      `https://kindoucloud.com:8077/api/mongoFile/previewImage/jwsq/${icon}`;
    return {
      // search: "",
      list1: [
        "https://cdn.uviewui.com/uview/swiper/swiper1.png",
        "https://cdn.uviewui.com/uview/swiper/swiper2.png",
        "https://cdn.uviewui.com/uview/swiper/swiper3.png",
      ],
      baseList: [
        {
          name: getIcon("657120486affce1e6fd249da"),
          title: "有声力量",
          url: "/subPages/have-sound/have-sound",
        },
        {
          name: getIcon("6571205a6affce1e6fd249dc"),
          title: "国学",
          url: "/subPages/chinese-studies/chinese-studies",
        },
        {
          name: getIcon("657120776affce1e6fd249e2"),
          title: "儿童",
          url: "/subPages/chinese-studies/chinese-studies",
        },
        {
          name: getIcon("6571206b6affce1e6fd249e0"),
          title: "音乐",
          url: "/subPages/chinese-studies/chinese-studies",
        },
        {
          name: getIcon("657120646affce1e6fd249de"),
          title: "舞蹈",
          url: "/subPages/chinese-studies/chinese-studies",
        },
      ],
      courseDataList: [],
    };
  },
  onShow() {
    // 获取所有课程列表
    this.getHotCourseList();
  },
  methods: {
    handleCourseItem(data) {
      uni.navigateTo({
        url: `/subPages/chinese-studies/detail?id=${data.course_video_resource}&text=${data.course_introduction}&title=${data.course_title}`,
      });
    },
    // 获取热门课程的数据
    async getHotCourseList(prams = {}) {
      const { data } = await getModelList("657161cb262fbe2d9d0ac940", prams);
      this.courseDataList = data?.list;
    },
    // 点击清除按钮
    async handleClear() {
      await this.getHotCourseList();
    },
    // 根据搜索框来查询
    async getSearchList(val) {
      let filterData = val
        ? getFilter(
            {
              course_title: val,
            },
            {
              method: "like",
            }
          )
        : {};
      await this.getHotCourseList(filterData);
    },
  },
};
</script>

<style lang="scss">
.home {
  padding: 30rpx;

  &-swiper {
    margin: 30rpx 0;
  }

  &-application {
    background: url("https://kindoucloud.com:8077/api/mongoFile/previewImage/jwsq/657045956affce1e6fd249d8");
    background-size: cover;
    background-repeat: no-repeat;
    height: 128rpx;
    margin-bottom: 20rpx;
    border-radius: 20rpx;
    box-shadow: 0rpx 2rpx 20rpx 1rpx rgba(151, 151, 151, 0.26);

    &-content {
      font-size: 28rpx;
      color: #fff;
      margin-left: 30rpx;

      .title {
        font-size: 34rpx;
        font-weight: 800;
      }
    }
  }

  &-menu {
    margin-bottom: 40rpx;
  }

  &-hot {
    .hot-course-header {
      color: #333;
      margin-bottom: 30rpx;

      .header-title {
        font-size: 36rpx;
        font-weight: 800;
      }

      .header-more {
        font-size: 28rpx;
        color: #999;
      }
    }

    .hot-course-list {
      .hot-course-item {
        margin-right: 20rpx;
        flex-shrink: 0;
        width: 380rpx;
        overflow: hidden;

        > image {
          display: block;
          position: relative;
          z-index: 1;
          width: 90%;
          height: 186rpx;
          border-radius: 18rpx;
          margin: 0 auto;
        }

        &-footer {
          padding: 110rpx 15rpx 10rpx;
          background: #ffffff;
          border-radius: 20rpx;
          margin-top: -100rpx;
          box-shadow: 0rpx 2rpx 20rpx 1rpx rgba(151, 151, 151, 0.26);

          .course-detailed {
            font-size: 28rpx;
            font-weight: bold;
            color: #333333;
            margin-bottom: 10rpx;
          }

          .tag-list {
            margin-bottom: 18rpx;
            overflow: auto;
          }

          .tag {
            flex-shrink: 0;
            padding: 6rpx 20rpx;
            color: #ff7c4a;
            font-size: 24rpx;
            background-color: #fdf3ed;
            border-radius: 4rpx;
            margin-right: 10rpx;
          }
        }
      }
    }
  }
}

.grid-text {
  font-size: 28rpx;
  color: #909399;
  padding: 10rpx 0 20rpx 0rpx;
  /* #ifndef APP-PLUS */
  box-sizing: border-box;
  /* #endif */
}

.grid-icon {
  border-radius: 50%;
  box-shadow: 0rpx 2rpx 20rpx 1rpx rgba(151, 151, 151, 0.26);
}
</style>
